<template>
  <a-card>
    <a-tabs
      class="detail"
      default-active-key="1"
      :active-key="tabActiveKey"
      lazy-load
      @change="handleTabChange"
    >
      <template #extra>
        <a-button type="text" @click="back">返回</a-button>
      </template>
      <a-tab-pane key="1">
        <template #title>
          <div class="tab-title">
            <icon-font type="icon-tongxunlu" />
            患者基本信息
          </div>
        </template>
        <basic :id="route.params.id"></basic>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #title>
          <div class="tab-title"
            ><icon-font type="icon-shoushuchaxun" />术前检查信息</div
          >
        </template>
        <operSearchBefore :id="route.params.id"></operSearchBefore>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #title>
          <div class="tab-title"
            ><icon-font type="icon-jiancha-shuai" />术后检查信息</div
          >
        </template>
        <operSearchAfter :id="route.params.id"></operSearchAfter>
      </a-tab-pane>
      <a-tab-pane key="7">
        <template #title>
          <div class="tab-title"
            ><icon-font type="icon-xieyebingke" />手术记录信息</div
          >
        </template>
        <surgicalRecords :id="route.params.id"></surgicalRecords>
      </a-tab-pane>
      <a-tab-pane key="4">
        <template #title>
          <div class="tab-title"
            ><icon-font type="icon-xieyebingke" />血液检查信息</div
          >
        </template>
        <bloodTest :id="route.params.id"></bloodTest>
      </a-tab-pane>
      <a-tab-pane key="5">
        <template #title>
          <div class="tab-title"
            ><icon-font type="icon-chaoshengzhenduanyi" />超声信息</div
          >
        </template>
        <ultrasonic :id="route.params.id"></ultrasonic>
      </a-tab-pane>
      <a-tab-pane key="6">
        <template #title>
          <div class="tab-title"><icon-font type="icon-canyin" />饮食信息</div>
        </template>
        <diet :id="route.params.id"></diet>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import basic from './components/basic.vue';
  import operSearchBefore from './components/oper-search-before.vue';
  import operSearchAfter from './components/oper-search-after.vue';
  import bloodTest from './components/blood-test.vue';
  import ultrasonic from './components/ultrasonic.vue';
  import Diet from './components/diet.vue';
  import surgicalRecords from './components/surgical-records.vue';

  const route = useRoute();
  const router = useRouter();

  // 初始化默认展开 tab
  const tabActiveKey = ref(route.params.tab as string);
  // tabs 切换
  const handleTabChange = (key: string | number) => {
    tabActiveKey.value = key as string;
  };
  const back = () => {
    router.back();
  };
</script>

<style lang="less" scoped>
  .tab-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    svg {
      margin: 0 5px;
    }
  }
  :deep(.arco-tabs-nav::before) {
    background-color: transparent !important;
  }
  :deep(.arco-tabs-content) {
    padding: 24px;
  }
  .detail {
    :deep(.arco-tabs-tab) {
      margin: 0 24px;
    }
  }
</style>
